<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!-- Form tail -->
    <slot name="tail">
        <!-- 尾部内容 -->
        <th>title</th>
    </slot>
  </div>
</template>

<script>
    export default {
        name: 'Index',
        props: {
            // 名称
            msg: {
                type: String,
                default: 'tony',
                required: true,
            },
            // 年龄
            age: {
                type: Number,
                default: 18,
            },
        },
        methods: {
            getName() {
                // 获取名称
                // @arg name：字符串
                this.$emit('getName', this.name || '测试案例');
            },
        },
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
